<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #f6f2f2;
            margin: 0;
            padding: 0;
        }

        p {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1096px;
            height: 616px;
            margin: 50px auto;
        }

        .box p {
            margin-top: 32px;
            font-size: 34px;
            text-align: center;
            color: #44291a;
        }

        .bg {
            position: absolute;
            width: 1096px;
            height: 616px;
            /* background-color: pink; */
        }

        .inp {
            /* position: relative; */
            float: right;
            margin-top: 100px;
            margin-right: 48px;
            padding-left: 15px;
            padding-top: 15px;
            height: 275px;
            width: 410px;
            border: 2px solid #ca9985;
            border-radius: 10px;
        }

        .white {
            position: absolute;
            top: 10px;
            left: 20px;
            width: 197px;
            height: 170px;
            /* margin-left: 20px;
            margin-top: 10px; */
        }

        .flag {
            position: absolute;
            top: 0;
            right: 55px;
            width: 88px;
            height: 136px;
        }

        .pic {
            position: absolute;
            width: 411px;
            height: 275px;
            /* margin-left: 104px;
            margin-top: 15px; */
            top: 190px;
            left: 105px;
        }

        .mask {
            position: absolute;
            top: 138px;
            left: 0;
            width: 100%;
            height: 436px;
            background: rgba(255, 255, 255, .4);
        }

        .inner {
            position: absolute;
            width: 392px;
            height: 260px;
            border-radius: 10px;
            /* 这里要用透明色 */
            background-color: #f6f2f2;
        }
        #msg {
            position: absolute;
            top: 184px;
            left: 133px;
        }
        .inner p {
            margin-top: 30px;
            margin-bottom: 30px;
            font-size: 20px;
            color: #44291a;
            text-align: center;
        }

        .inner div {
            width: 300px;
            height: 32px;
            margin: 0 auto;
            margin-bottom: 24px;
            line-height: 32px;
        }

        .inner div label {
            float: right;
            color: #44291a;
        }

        .inner div input {
            float: right;
            height: 28px;
            width: 208px;
            margin-left: 17px;
            border-radius: 6px;
        }
        #username {
            background-image: url(images/username.png);
            background-repeat: no-repeat;
            background-position: 181px center;
            background-size: 16px 19px;
        }
        #psd {
            background-image: url(images/password.png);
            background-repeat: no-repeat;
            background-position: 180px center;
            background-size: 18px 19px;
        }
        .inner button {
            width: 144px;
            height: 29px;
            margin-left: 135px;
            margin-top: 10px;
            background-color: #ca9985;
            border: none;
            border-radius: 30px;
            color: #fff;
        }
    </style>
    <script src="js/jQuery%203.4.1%20produce.js"></script>
    <script>
        $(function () {
            $("#commit").click(function () {
                var username = $("#username").val();
                var password = $("#psd").val();
                $.post(
                    "user/login",
                    {
                        "username": username,
                        "password": password
                    },
                    function (data) {
                        var status = data.status;
                        if (status === 0){
                            var msg = $("#msg");
                            msg.html(data.message);
                            msg.css("color", "red");
                            msg.disable();
                        }else {
                            window.location = "page/index";
                        }
                    },
                    "json"
                );
            })
        });

    </script>
    <title>互联网院党务系统</title>
</head>

<body>

    <div class="box">
        <div class="bg">
            <img src="images/white.png" alt="" class="white">

            <img src="images/bg1.png" alt="" class="pic">

            <img src="images/flag.png" alt="" class="flag">
        </div>
        <p>互联网院党建系统</p>
        <div class="mask">
        </div>
        <div class="inp">
            <div class="inner">
                <p>欢迎登录</p>
                <div>
                    <input type="text" id="username">
                    <label for="username">用户名</label>
                </div>
                <div>
                    <input type="password" id="psd">
                    <label for="psd">密码</label>
                </div>
                <span id="msg" style="font-size: 5px;" disabled="false"></span>
                <button id="commit">登录</button>
            </div>
        </div>
    </div>

    <script>
        // var h = 
    </script>
</body>

</html>